<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        /**
         *
         * 验证表单元素
         * @param textId 文本框ID
         * @param rex 验证数据正则表达式
         * @param spanId 错误提示span标签id
         * @param errorInfo 错误信息
         */
        function checkForm(textId,rex,spanId,errorInfo){
            if(rex.test($(textId).value)){
                $(spanId).innerHTML = "验证通过";
                $(spanId).style.color = "green";
                return true;
            }
            else{
                $(spanId).innerHTML = errorInfo;
                $(spanId).style.color = "red";
                return false;
            }
        }

        function formSumbmit(){
            if(checkForm('userName',/^[a-zA-Z]{2,20}$/,'nameSpan','用户名必须为2-20个字母')
                & checkForm('pwd',/^\d{6}$/,'pwdSpan','密码必须是6位数字')
            &checkForm('email',/^[a-zA-Z0-9]{2,20}@[a-zA-Z0-9]{2,10}[.](com|cn|net)$/,'emailSpan','邮件格式为XX@XX.com')
            &checkForm('phone',/^1[3578]\d{9}$/,'phoneSpan','电话必须为13、15、17、18开始的11位数')
            &checkForm('birthday',/^\d{4}-\d{2}-\d{2}$/,'birthdaySpan','生日格式为XXXX-XX-XX')){
                $("f1").submit();
            }
        }

    </script>
</head>
<body>
    <form action="add" id="f1">
        用户名：<input type="text" name="userName" id="userName"
                   onblur="checkForm('userName',/^[a-zA-Z]{2,20}$/,'nameSpan','用户名必须为2-20个字母')"><br>
        <span id="nameSpan"></span><br>
        密码：<input type="text" name="pwd" id="pwd"
                  onblur="checkForm('pwd',/^\d{6}$/,'pwdSpan','密码必须是6位数字')"><br>
        <span id="pwdSpan"></span><br>
        电子邮件：<input type="text" name="email" id="email"
                    onblur="checkForm('email',/^[a-zA-Z0-9]{2,20}@[a-zA-Z0-9]{2,10}[.](com|cn|net)$/,'emailSpan','邮件格式为XX@XX.com')"><br>
        <span id="emailSpan"></span><br>
        电话：<input type="text" name="phone" id="phone"
                  onblur="checkForm('phone',/^1[3578]\d{9}$/,'phoneSpan','电话必须为13、15、17、18开始的11位数')"><br>
        <span id="phoneSpan"></span><br>
        生日：<input type="text" name="birthday" id="birthday"
                  onblur="checkForm('birthday',/^\d{4}-\d{2}-\d{2}$/,'birthdaySpan','生日格式为XXXX-XX-XX')"><br>
        <span id="birthdaySpan"></span><br>
        <input type="button" value="提交" onclick="formSumbmit()">
    </form>
</body>
</html>